<template>
  <view class="container">
    <u-navbar title="景点详情" height="50" :border-bottom="false" title-size="36"></u-navbar>
    <view class="attr-warrper">
      <u-image
        class="image"
        width="750rpx"
        height="420rpx"
        :src="attr.full_image"
        mode="aspectFill"
      ></u-image>
      <view class="attr-info">
        <view class="title">毕节织金洞</view>
        <view class="addr">贵州省毕节市织金县官寨苗族乡境内</view>
        <view class="content"
          >织金洞，位于贵州省织金县官寨苗族乡，地处乌江源流之
          一的六冲河南岸，距省城贵阳120千米。织金洞景区地质遗迹景观发育典型。洞内景观琳琅满目、流金溢彩，囊括了世界上所有溶洞的堆积形态和类别；
          2022年7月15日，贵州省毕节市织金洞景区被中华人民共和国文化和旅游部确定为国家AAAAA级旅游景区。</view
        >
      </view>
    </view>
  </view>
</template>

<script>
// import * as LuxianApi from '@/api/luxian'
export default {
  data() {
    return {
      isLoading: false,
      attrId: null,
      attr: {}
    }
  },
  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    // 记录query参数
    this.onRecordQuery(options)
    // 加载页面数据
    this.onRefreshPage()
  },
  methods: {
    // 刷新页面数据
    onRefreshPage() {
      const app = this
      app.isLoading = true
      // Promise.all([app.getAttrDetail()])
      // 	.finally(() => app.isLoading = false)
    },
    // 记录query参数
    onRecordQuery(query) {
      // const scene = getSceneData(query)
      this.attrId = query.attrId ? parseInt(query.attrId) : 0
    },
    getAttrDetail() {
      const app = this
      return new Promise((resolve, reject) => {
        LuxianApi.attractionsDetais(app.attrId)
          .then((result) => {
            app.attr = result.data
            resolve(result)
          })
          .catch(reject)
      })
    }
  }
}
</script>
<style>
page {
  background-color: #fff;
}
</style>
<style lang="scss" scoped>
.attr-warrper {
  width: 100%;
  .attr-cover {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    background: #fff;
    &:after {
      content: '';
      display: block;
      margin-top: 100%;
    }
    .image {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      -o-object-fit: cover;
      object-fit: cover;
      border-radius: 10rpx;
    }
  }
  .attr-info {
    width: 100%;
    padding: 20rpx;
    background-color: #fff;
    .title {
      font-weight: 600;
      font-size: 32rpx;
      color: #333333;
      padding-top: 20rpx;
    }
    .addr {
      font-weight: 400;
      font-size: 26rpx;
      color: #999999;
      padding: 20rpx 0;
    }
    .content {
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 48rpx;
    }
  }
}
</style>
